<template>
  <div class="boss">
    <div id="ebox"></div>
  </div>
</template>
<script>
//echarts
import * as echarts from "echarts";

export default {
  props: {
    edata: {
      type: Array,
    },
    type2: {
      type: Number,
    },
  },
  data() {
    return {
      // a: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    };
  },
  mounted() {
    this.isEcharts(this.date);
  },

  computed: {
    date() {
      var brr = [];
      var crr = [];
      var show = false;
      if (this.edata.length > 0) {
        var arr = this.edata;
        if (this.type2 == 0) {
          show = false;
          for (var i = 0; i < arr.length; i++) {
            brr.push(arr[arr.length - 1 - i].date);
            crr.push(arr[arr.length - 1 - i].average);
          }
        } else if (this.type2 == 1) {
          show = true;
          for (var i = 0; i < 24; i++) {
            brr.push(i + ":00");
          }
          crr = arr[0].temp;
        } else if (this.type2 == 2) {
          show = true;
          brr = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
          for (var i = 0; i < arr.length; i++) {
            crr.push(arr[arr.length - 1 - i].average);
          }
        } else if (this.type2 == 3) {
          show = true;
          for (var i = 0; i < arr.length; i++) {
            brr.push(i + 1);
            crr.push(arr[arr.length - 1 - i].average);
          }
        } else if (this.type2 == 4) {
          show = true;
          for (var i = 0; i < arr.length; i++) {
            brr.push(arr[arr.length - 1 - i].date);
            crr.push(arr[arr.length - 1 - i].average);
          }
        }
      }
      return { brr, crr, show };
    },
  },
  watch: {
    edata: {
      deep: true,
      handler() {
        this.isEcharts(this.date);
      },
    },
  },
  methods: {
    isEcharts(date) {
      var myChart2 = echarts.init(document.getElementById("ebox"));
      myChart2.setOption({
        tooltip: {},
        xAxis: {
          // show: false,
          type: "category",
          data: date.brr,
          // boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
          axisLabel: {
            showMaxLabel: true,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            onZero: true,
          },
          axisLabel: {
            formatter: function (value, index) {
              if (index != 0) {
                return value + "%";
              } else {
                return value;
              }
            },
          },
          max: 75,
          splitLine: {
            lineStyle: {
              type: "dashed", //虚线
            },
            show: true, //隐藏
          },
        },
        series: [
          {
            name: "环境湿度",
            type: "bar",
            symbol: "none",
            data: date.crr,
            // smooth: 0.5,
            smoothConstraint: false,
            animationEasing: "linear",
            animationDuration: 2000,
            barMaxWidth: 20,
            label: {
              show: date.show,
              color: "#333333",
              position: "top",
            },
            //线条渐变
            itemStyle: {
              //线条的渐变
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(76,103,253,1)", // 顶部的颜色
                },
                {
                  offset: 0.3,
                  color: "rgba(76,103,253,1)", // 60% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(58,132,255, 0.1)", // 0% 处的颜色
                },
              ]),
            },
          },
        ],
      });
    },
  },
};
</script>



<style lang="less" scoped>
.boss {
  height: 389px;
  width: 552px;
  border-radius: 0 0 8px 8px;
  background-color: #fff;
  #ebox {
    height: 349px;
    width: 512px;
  }
}
</style>